<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <stat-card title="总试卷数" :value="statData.totalPapers" icon="paper" />
      </el-col>
      <el-col :span="6">
        <stat-card title="活跃试卷" :value="statData.activePapers" icon="active" />
      </el-col>
      <el-col :span="6">
        <stat-card title="已归档" :value="statData.archivedPapers" icon="archive" />
      </el-col>
      <el-col :span="6">
        <stat-card title="平均分趋势" :value="statData.avgScoreTrend.toFixed(2)" icon="trend" />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <chart-card title="热门试卷TOP10">
          <bar-chart :chart-data="topUsedPapersChartData" />
        </chart-card>
      </el-col>
      <el-col :span="12">
        <chart-card title="试卷难度分布">
          <pie-chart :chart-data="difficultyChartData" />
        </chart-card>
      </el-col>
    </el-row>

    <el-row class="mt-20">
      <el-col :span="24">
        <chart-card title="通过率分布">
          <line-chart :chart-data="passRateChartData" />
        </chart-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPaperStatistics } from '@/api/stat/stat'
import StatCard from './StatCard'
import ChartCard from './ChartCard'
import PieChart from './PieChart'
import BarChart from './BarChart'
import LineChart from './LineChart'

export default {
  name: 'PaperStatPanel',
  components: {
    StatCard,
    ChartCard,
    PieChart,
    BarChart,
    LineChart
  },
  data() {
    return {
      statData: {
        totalPapers: 0,
        activePapers: 0,
        archivedPapers: 0,
        topUsedPapers: [],
        difficultyDistribution: [],
        passRateDistribution: [],
        avgScoreTrend: 0
      },
      loading: false
    }
  },
  computed: {
    topUsedPapersChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.topUsedPapers
      }
    },
    difficultyChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.difficultyDistribution
      }
    },
    passRateChartData() {
      return {
        columns: ['name', 'value'],
        rows: this.statData.passRateDistribution
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      getPaperStatistics().then(response => {
        this.statData = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
